<template>
  <div class="date-box">
    <div class="date-overflow ui-center">
      <div class="date-list ui-flex">
        <div class="item ui-flex" :style="{ transform: 'translateX(' + -horizontalIndex * 214 + 'px)' }"
             v-for="item in schoolList" :key="item.id">
          <div class="left"></div>
          <div class="right">
            <div class="date">{{ item.ext.date }}</div>
            <div class="text">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="date-btn ui-flex">
        <div :class="['btn prev', { on: horizontalAllowPrev }]" @click="SlideHorizontal(false)"></div>
        <div :class="['btn next', { on: horizontalAllowNext }]" @click="SlideHorizontal(true)"></div>
      </div>
    </div>
  </div>
  <div class="map-box ui-center ui-flex align-center">
    <div class="left">
      <div class="btn" @click="SlideVertical(false)"></div>
      <div class="list-box">
        <div class="list" :style="{ transform: 'translateY(' + -verticalIndex * 90 + 'px)' }">
          <div
            class="item ui-oneline"
            :class="{ 'selected-item': selectedSchool?.id === item.id }"
            v-for="item in schoolList"
            @click="selectSchool(item)"
            :key="item.id"
            :title="item.title">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="btn next" @click="SlideVertical(true)"></div>
    </div>
    <div class="right" style="display: contents">
      <ProvinceMap ref="provinceMap" class="map-img" @schoolList="changeSchoolList" @hidePopup="hidePopup"
                 ext-type="school" title="扎根学校"/>
    </div>
  </div>
</template>

<script setup>
import ProvinceMap from '@/components/ProvinceMap.vue';
import { onMounted } from 'vue';

let schoolList = ref([]),
  selectedSchool = ref(null);

// 水平滚动
let horizontalIndex = ref(0),
  horizontalAllowNext = computed(() => horizontalIndex.value < schoolList.value.length - 7),
  horizontalAllowPrev = computed(() => horizontalIndex.value > 0);
const SlideHorizontal = isNext => {
  if (isNext && horizontalAllowNext.value) {
    horizontalIndex.value++;
  } else if (!isNext && horizontalAllowPrev.value) {
    horizontalIndex.value--;
  }
};

// 垂直滚动
let verticalIndex = ref(0),
  verticalAllowNext = computed(() => verticalIndex.value < schoolList.value.length - 6),
  verticalAllowPrev = computed(() => verticalIndex.value > 0);
const SlideVertical = isNext => {
  if (isNext && verticalAllowNext.value) {
    verticalIndex.value++;
  } else if (!isNext && verticalAllowPrev.value) {
    verticalIndex.value--;
  }
};

/**
 * 选择学校操作
 */
const selectSchool = item => {
  selectedSchool.value = item;
  provinceMap.value.showItem(item);
};

/**
 * 地图中回调隐藏弹窗事件，通过判定当前选中的学校id是否与点击的id一致，一致则清空选中学校
 */
const hidePopup = id => {
  if (selectedSchool.value && selectedSchool.value.id === id) {
    selectedSchool.value = null;
  }
};

const changeSchoolList = list => {
  schoolList.value = list;
};

let provinceMap = ref(null);
onMounted(() => {
  if (provinceMap.value) {
    // 延迟3秒，resize地图
    setTimeout(() => {
      provinceMap.value?.resizeMap();
    }, 1000);
  }
});
</script>

<style lang="scss" scoped>
.date-box {
  @include bgImg('@/assets/list/school-date.png');
  background-size: auto 435px;
  background-position: 0 bottom;
  box-sizing: border-box;
  padding: 0 0 284px 0;

  .date-overflow {
    padding: 82px 0 0 0;
    overflow: hidden;
    position: relative;

    .date-btn {
      position: absolute;
      top: 20px;
      left: 0;

      .btn {
        width: 32px;
        height: 32px;
        cursor: pointer;
        @include bgImg('@/assets/list/school-arrow.png');

        &.prev {
          transform: rotate(180deg);
        }

        &.next {
          margin-left: 20px;
        }

        &.on {
          @include bgImg('@/assets/list/school-arrow_on.png');
        }
      }
    }
  }

  .item {
    width: 214px;
    margin-top: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;

    &:nth-child(2n + 1) {
      margin-top: 0px;
    }

    .left {
      width: 12px;
      height: 181px;
      margin: 10px 0 0 0;
      @include bgImg('@/assets/list/school-date-line.png');
    }

    .right {
      font-size: 22px;
      color: #956e5c;
      line-height: 32px;
      padding: 0 0 0 15px;

      .date {
        font-weight: bold;
        padding: 0 0 7px 0;
      }
    }
  }
}

.map-box {
  margin-top: -150px;

  .left {
    width: 240px;

    .btn {
      width: 40px;
      height: 22px;
      @include bgImg('@/assets/list/menu-icon.png');
      margin: 0 auto 30px;
      cursor: pointer;

      &.next {
        transform: rotate(180deg);
        margin: 10px auto 0;
      }
    }

    .list-box {
      max-height: 540px;
      overflow: hidden;

      .list {
        transition: all 0.3s ease;
      }
    }

    .item {
      font-size: 18px;
      color: #494949;
      line-height: 70px;
      height: 70px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      padding: 0 30px;
      @include bgImg('@/assets/list/menu-bg.png');

      &:last-child {
        margin-bottom: 0;
      }

      &.on,
      &:hover {
        color: #9c2c29;
        @include bgImg('@/assets/list/menu-bg_on.png');
      }
    }

    .selected-item {
      color: #9c2c29;
      @include bgImg('@/assets/list/menu-bg_on.png');
    }
  }

  .right {
    padding: 0 0 0 163px;

    .map-img {
      width: 1097px;
      height: 789px;
    }
  }
}
</style>
